import React from 'react';
import QueueAnim from 'rc-queue-anim';

import Box from '@/pages/GanSuDaTang/Dashboard/components/Box';
import Segmented from '@/pages/GanSuDaTang/Dashboard/components/Segmented';
import { tagsOptions } from './helper';
import styles from './index.less';

export default () => {
  const [tag, setTag] = React.useState(tagsOptions[0]);

  return (
    <Box
      title={'电力市场发展史'}
      apend={
        <Segmented value={tag?.value} options={tagsOptions} onChange={(v, item) => setTag(item)} />
      }
      arrow={true}
      modalContent={<img style={{ width: '100%' }} src={tag?.img} alt={''} />}
    >
      <div className={styles.container}>
        <div className={styles.list}>
          {tag?.data?.map((item, i) => (
            <QueueAnim
              key={item.key}
              duration={1000}
              delay={i * 200}
              style={{ maxWidth: `${Math.floor(100 / tag.data.length)}%` }}
            >
              <div key="item" className={styles.list_item}>
                <div className={styles.index}>{i + 1}</div>
                <div className={styles.title}>{item.title}</div>
                <div className={styles.value}>
                  {item.txt.map((txt, y) => (
                    <span key={`${item.key}_${y}`} style={{ color: txt.color }}>
                      {txt.val}
                    </span>
                  ))}
                </div>
              </div>
            </QueueAnim>
          ))}
        </div>
      </div>
    </Box>
  );
};
